<!-- Lighthouse category score -->
<template id="tmpl-lh-category-score">
  <div class="lh-score">
    <div class="lh-score__value"><!-- fill me --></div>
    <div class="lh-score__gauge"></div>
    <div class="lh-score__header">
      <div class="lh-score__snippet">
        <span class="lh-score__title"><!-- fill me --></span>
      </div>
      <div class="lh-score__description"><!-- fill me --></div>
    </div>
  </div>
</template>

<!-- Lighthouse audit score -->
<template id="tmpl-lh-audit-score">
  <div class="lh-score">
    <div class="lh-score__value"><!-- fill me --></div>
    <details class="lh-score__header lh-expandable-details">
      <summary class="lh-score__snippet lh-expandable-details__summary">
        <span class="lh-score__title"><!-- fill me --></span>
        <div class="lh-toggle-arrow" title="See audits"></div>
      </summary>
      <div class="lh-score__description"><!-- fill me --></div>
    </details>
  </div>
</template>

<!-- Lighthouse timeline metric -->
<template id="tmpl-lh-timeline-metric">
  <div class="lh-timeline-metric">
    <div class="lh-timeline-metric__sparkline">
      <div class="lh-sparkline__bar"></div>
    </div>
    <div class="lh-timeline-metric__header">
      <div class="lh-timeline-metric__value"><!-- fill me --></div>
      <details class="lh-timeline-metric__details lh-expandable-details">
        <summary class="lh-timeline-metric__summary lh-expandable-details__summary">
          <span class="lh-timeline-metric__title"><!-- fill me --></span>
          <div class="lh-toggle-arrow" title="See audits"></div>
        </summary>
        <div class="lh-timeline-metric__description"><!-- fill me --></div>
      </details>
    </div>
  </div>
</template>

<!-- Lighthouse left nav -->
<template id="tmpl-lh-leftnav">
  <style>
    .lh-leftnav {
      width: var(--report-menu-width);
      border-right: 1px solid var(--report-border-color);
      position: fixed;
      height: 100%;
      background: #fff;
      will-change: transform; /* prevent excessive paints */
      z-index: 2;
    }
    .lh-leftnav__item {
      padding: var(--navitem-vpadding) var(--navitem-hpadding);
      color: var(--secondary-text-color);
      font-size: var(--navitem-font-size);
      line-height: var(--navitem-line-height);
      display: flex;
      justify-content: space-between;
      text-decoration: none;
      color: inherit;
    }
    .leftnav-item__score {
      background: transparent;
    }
    .leftnav-item__score::after {
      content: '';
    }
    .leftnav-item__score.lh-score__value--pass {
      color: var(--pass-color);
    }
    .leftnav-item__score.lh-score__value--average {
      color: var(--average-color);
    }
    .leftnav-item__score.lh-score__value--fail {
      color: var(--fail-color);
    }
    .leftnav__header {
      padding: 0 20px;
      margin-bottom: var(--navitem-vpadding);
      height: 115px;
      font-size: 18px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: url() no-repeat 150% 100%;
      background-color: #2238b3;
      background-size: 205px;
      background-blend-mode: luminosity;
    }
    .leftnav__header__title {
      font-family: var(--text-font-family);
      font-size: var(--title-font-size);
      line-height: var(--title-line-height);
      font-weight: 300;
      color: #fff;
      margin: 0;
      padding: 0;
    }
    .leftnav__header__version {
      color: #aab3ed;
      font-family: var(--text-font-family);
      font-size: var(--body-font-size);
      line-height: var(--body-line-height);
    }
    @media screen and (max-width: 964px) {
      .lh-leftnav {
        display: none;
      }
    }
    @media print {
      .lh-leftnav {
        display: none;
      }
    }
  </style>
  <nav class="lh-leftnav">
    <div class="leftnav__header">
      <h1 class="leftnav__header__title">Lighthouse</h1>
      <div class="leftnav__header__version"><!-- fill me --></div>
    </div>
    <template id="tmpl-lh-leftnav__items">
      <a href="#" class="lh-leftnav__item">
        <span class="leftnav-item__category"><!-- fill me --></span>
        <span class="leftnav-item__score"><!-- fill me --></span>
      </a>
    </template>
  </nav>
</template>

<!-- Lighthouse header -->
<template id="tmpl-lh-heading">
  <style>
    :root {
      --report-header-height: 58px;
      --report-header-bg-color: #fafafa;
    }
    .lh-header {
      display: flex;
      height: var(--report-header-height);
      left: 0;
      right: 0;
      max-width: 100%; /* support text-overflow on url */
      border-bottom: 1px solid var(--report-secondary-border-color);
      position: fixed;
      z-index: 1;
      will-change: transform;
      background-color: var(--report-header-bg-color);
      margin-left: var(--report-menu-width);
      align-items: center;
      padding: 0 calc(var(--default-padding) * 2);
    }
    .lh-metadata {
      flex: 1 1 0;
      padding-right: calc(var(--default-padding) / 2);
      line-height: 20px;
      color: var(--secondary-text-color);
      overflow-x: hidden;
    }
    .lh-metadata__results {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .lh-metadata__url {
      color: currentColor;
    }
    .lh-export {
      position: relative;
    }
    .lh-export__button {
      background-color: #fff;
      border: 1px solid var(--report-border-color);
      border-radius: 3px;
      cursor: pointer;
      outline: none;
      height: 32px;
      width: 48px;
      background-repeat: no-repeat;
      background-size: 20px;
      background-position: 50% 50%;
    }
    .lh-export__button:focus,
    .lh-export__button.active {
      box-shadow: 1px 1px 3px #ccc;
    }
    .lh-export__button.active + .lh-export__dropdown {
      opacity: 1;
      clip: rect(0, 164px, 200px, 0);
    }
    .lh-export__dropdown {
      position: absolute;
      background-color: #fff;
      border: 1px solid var(--report-border-color);
      border-radius: 3px;
      padding: calc(var(--default-padding) / 2) 0;
      cursor: pointer;
      top: 36px;
      right: 0;
      box-shadow: 1px 1px 3px #ccc;
      min-width: 125px;
      clip: rect(0, 164px, 0, 0);
      opacity: 0;
      transition: all 200ms cubic-bezier(0,0,0.2,1);
    }
    .lh-export__dropdown a {
      display: block;
      color: currentColor;
      text-decoration: none;
      white-space: nowrap;
      padding: 0 12px;
      line-height: 2;
    }
    .lh-export__dropdown a:hover,
    .lh-export__dropdown a:focus {
      background-color: #efefef;
      outline: none;
    }
    .lh-export__dropdown .report-icon {
      cursor: pointer;
      background-repeat: no-repeat;
      background-position: 8px 50%;
      background-size: 18px;
      background-color: transparent;
      text-indent: 18px;
    }
    /* copy icon needs slight adjustments to look great */
    .lh-export__dropdown .report-icon--copy {
      background-size: 16px;
      background-position: 9px 50%;
    }
    /* save-as-gist option hidden in report */
    .lh-export__dropdown .lh-export--gist {
      display: none;
    }
    .lh-config {
      display: flex;
    }
    .lh-env {
      padding: var(--default-padding) 0 var(--default-padding) calc(var(--default-padding) * 2);
      left: 0;
      top: 100%;
      position: absolute;
      width: 100%;
      background-color: var(--report-header-bg-color);
      border-top: 1px solid var(--report-secondary-border-color);
      border-bottom: 1px solid var(--report-secondary-border-color);
    }
    .lh-env__title {
      font-size: var(--header-font-size);
    }
    .lh-env__items {
      margin: var(--default-padding) 0 0 0;
    }
    .lh-config__timestamp {
      margin-right: 6px;
    }
    .lh-config__settings-toggle {
      margin-left: 6px;
    }
    .lh-config__timestamp,
    .lh-config__settings-toggle summary {
      color: var(--secondary-text-color);
    }
    .lh-config__settings-toggle summary {
      display: flex;
      align-items: center;
    }
    .lh-config__settings-toggle .lh-toggle-arrow {
      width: 16px;
      height: 16px;
      margin-left: 2px;
    }
    .lh-config__settings-toggle[open] .lh-toggle-arrow {
      transform: rotateZ(90deg);
    }
    .lh-config__settings-toggle summary::-moz-list-bullet {
      display: none;
    }
    .lh-config__settings-toggle summary::-webkit-details-marker {
      display: none;
    }
    @media screen and (min-width: 965px) {
      .lh-header {
        width: var(--report-width);
        right: initial;
        left: initial;
      }
    }
    @media screen and (max-width: 964px) {
      .lh-export__dropdown {
        right: 0;
        left: initial;
      }
      .lh-header {
        padding: 0 var(--default-padding);
        margin-left: 0;
      }
    }
    @media print {
      .lh-header {
        position: static;
        margin-left: 0;
      }
    }
  </style>
  <div class="lh-header">
    <div class="lh-metadata">
      <div class="lh-metadata__results">Results for: <a href="" class="lh-metadata__url" target="_blank" rel="noopener"><!-- fill me --></a></div>
      <div class="lh-config">
        <span class="lh-config__timestamp"><!-- fill me --></span> &bullet;
        <details class="lh-config__settings-toggle">
          <summary>
            <span>Runtime settings</span>
            <span class="lh-toggle-arrow" title="See report's runtime settings"></span>
          </summary>
          <div class="lh-env">
            <div class="lh-env__title">Runtime environment</div>
            <ul class="lh-env__items">
              <li class="lh-env__item">
                <span class="lh-env__name">User agent:</span>
                <b class="lh-env__item__ua"><!-- fill me --></b>
              </li>
              <template id="tmpl-lh-env__items">
                <li class="lh-env__item">
                  <span class="lh-env__name"><!-- fill me --></span>
                  <span class="lh-env__description"><!-- fill me --></span>:
                  <b class="lh-env__enabled"><!-- fill me --></b>
                </li>
              </template>
            </ul>
          </div>
        </details>
      </div>
    </div>
    <div class="lh-export">
      <button class="report-icon report-icon--share lh-export__button" title="Export report"></button>
      <div class="lh-export__dropdown">
        <a href="#" class="report-icon report-icon--print" data-action="print">Print...</a>
        <a href="#" class="report-icon report-icon--copy" data-action="copy">Copy JSON</a>
        <a href="#" class="report-icon report-icon--download" data-action="save-html">Save as HTML</a>
        <a href="#" class="report-icon report-icon--download" data-action="save-json">Save as JSON</a>
        <a href="#" class="report-icon report-icon--open lh-export--viewer" data-action="open-viewer">Open in Viewer</a>
        <a href="#" class="report-icon report-icon--open lh-export--gist" data-action="save-gist">Save as Gist</a>
      </div>
    </div>
  </div>
</template>

<!-- Lighthouse footer -->
<template id="tmpl-lh-footer">
  <style>
    .lh-footer {
      min-height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--report-header-bg-color);
      border-top: 1px solid var(--report-secondary-border-color);
    }

    .lh-footer span {
      text-align: center;
    }
  </style>
  <footer class="lh-footer">
    <span>
      Generated by <b>Lighthouse</b> <span class="lh-footer__version"><!-- fill me --></span> on
      <span class="lh-footer__timestamp"><!-- fill me --></span> |
      <a href="https://github.com/GoogleChrome/Lighthouse/issues" target="_blank" rel="noopener">File an issue</a>
    </span>
  </footer>
</template>

<!-- Lighthouse score gauge -->
<template id="tmpl-lh-gauge">
  <style>
    .lh-gauge {
      --circle-size: calc(2.5 * var(--header-font-size));
      --circle-size-half: calc(var(--circle-size) / 2);
      --circle-background: #ccc;
      --circle-border-width: 2px;
      --inset-size: calc(var(--circle-size) - 2 * var(--circle-border-width));
      --inset-color: #fff;
      --transition-length: 1s;
      width: var(--circle-size);
      height: var(--circle-size);
      background-color: var(--circle-background);
      border-radius: 50%;
    }
    .lh-gauge--pass {
      --circle-color: var(--pass-color);
      color: var(--circle-color);
    }
    .lh-gauge--average {
      --circle-color: var(--average-color);
      color: var(--circle-color);
    }
    .lh-gauge--fail {
      --circle-color: var(--fail-color);
      color: var(--circle-color);
    }
    .lh-gauge__mask,
    .lh-gauge__fill {
      width: var(--circle-size);
      height: var(--circle-size);
      position: absolute;
      transition: transform var(--transition-length);
      border-radius: 50%;
    }
    .lh-gauge__mask {
      clip: rect(0px, var(--circle-size), var(--circle-size), var(--circle-size-half));
    }
    .lh-gauge__mask .lh-gauge__fill {
      clip: rect(0px, var(--circle-size-half), var(--circle-size), 0px);
      background-color: var(--circle-color);
      backface-visibility: hidden;
    }
    .lh-gauge__percentage {
      --spacer: calc((var(--circle-size) - var(--inset-size)) / 2);
      width: var(--inset-size);
      height: var(--inset-size);
      position: absolute;
      margin-left: var(--spacer);
      margin-top: var(--spacer);
      background-color: var(--inset-color);
      border-radius: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--header-font-size);
    }
    .lh-gauge__wrapper {
      display: inline-flex;
      align-items: center;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
      flex: 1;
      min-width: auto;
      position: relative;
    }
    .lh-scores-header .lh-gauge__wrapper {
      width: calc(10.5 * var(--body-font-size));
    }
    .lh-gauge__label {
      font-size: var(--body-font-size);
      line-height: var(--body-line-height);
      margin-top: calc(0.5 * var(--body-line-height));
      text-align: center;
    }
  </style>
  <a href="#" class="lh-gauge__wrapper">
    <div class="lh-gauge" data-progress="0">
      <div class="lh-gauge__circle">
        <div class="lh-gauge__mask lh-gauge__mask--full">
          <div class="lh-gauge__fill"></div>
        </div>
        <div class="lh-gauge__mask lh-gauge__mask--half">
          <div class="lh-gauge__fill"></div>
          <div class="lh-gauge__fill lh-gauge__fill--fix"></div>
        </div>
      </div>
      <div class="lh-gauge__percentage"></div>
    </div>
    <div class="lh-gauge__label"><!-- fill me --></div>
  </a>
</template>

<!-- Lighthouse crtiical request chains component -->
<template id="tmpl-lh-crc">
  <style>
    .lh-crc .tree-marker {
      width: 12px;
      height: 26px;
      display: block;
      float: left;
      background-position: top left;
    }
    .lh-crc .horiz-down {
      background: url('data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><g fill="#D8D8D8" fill-rule="evenodd"><path d="M16 12v2H-2v-2z"/><path d="M9 12v14H7V12z"/></g></svg>');
    }
    .lh-crc .right {
      background: url('data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M16 12v2H0v-2z" fill="#D8D8D8" fill-rule="evenodd"/></svg>');
    }
    .lh-crc .up-right {
      background: url('data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M7 0h2v14H7zm2 12h7v2H9z" fill="#D8D8D8" fill-rule="evenodd"/></svg>');
    }
    .lh-crc .vert-right {
      background: url('data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M7 0h2v27H7zm2 12h7v2H9z" fill="#D8D8D8" fill-rule="evenodd"/></svg>');
    }
    .lh-crc .vert {
      background: url('data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M7 0h2v26H7z" fill="#D8D8D8" fill-rule="evenodd"/></svg>');
    }
    .lh-crc .crc-tree {
      font-size: 14px;
      width: 100%;
      overflow-x: auto;
    }
    .lh-crc .crc-node {
      height: 26px;
      line-height: 26px;
      white-space: nowrap;
    }
    .lh-crc .crc-node__tree-value {
      margin-left: 10px;
    }
    .lh-crc .crc-node__chain-duration {
      font-weight: 700;
    }
    .lh-crc .crc-node__tree-hostname {
      color: #595959;
    }
    .lh-crc .crc-initial-nav {
      color: #595959;
      font-style: italic;
    }
  </style>
  <div class="lh-score__description">
    Longest chain: <b class="lh-crc__longest_duration"><!-- fill me: longestChain.duration --></b>
    over <b class="lh-crc__longest_length"><!-- fill me: longestChain.length --></b> requests, totalling
    <b class="lh-crc__longest_transfersize"><!-- fill me: longestChain.length --></b>
  </div>
  <div class="lh-crc">
    <details class="lh-details">
      <summary><!-- fill me --></summary>
      <div class="crc-initial-nav">Initial Navigation</div>
      <!-- stamp for each chain -->
      <template id="tmpl-lh-crc__chains">
        <div class="crc-node">
          <span class="crc-node__tree-marker">
            <!-- fill me -->
          </span>
          <span class="crc-node__tree-value">
            <span class="crc-node__tree-file"><!-- fill me: node.request.url.file --></span>
            <span class="crc-node__tree-hostname">(<!-- fill me: node.request.url.host -->)</span>
            <!-- fill me -->
          </span>
        </div>
      </template>
    </details>
  </div>
</template>
